@use "sass:math";

$pikachu-shin: #ffe035;
$outline-color: #000;
$pupil-color: #2e2e2e;
$pupil-color2: #f5f5f5;
$tongue: #9b000a;
$bloody-mouth: #ff485f;
$japan-red: #f00;

@mixin width-height($width: 0, $height: 0) {
  height: $height;
  width: $width;
}

@function box-size($width: 0, $height: false) {
  @if $height == false {
    $height: $width;
  }

  @return ($width, $height);
}

%pseudo {
  content: '';
  display: block;
}

body {
  background-color: $pikachu-shin;
  min-height: 100vh;
  width: 100vw;
}

.face {
  height: 300px;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%) translateX(-50%);
  width: 500px;

  .nose-tip {
    border: 10px solid $pikachu-shin;
    border-bottom-width: 1px;
    border-left-color: $pikachu-shin;
    border-right-color: $pikachu-shin;
    border-top-color: $outline-color;

    left: 50%;
    margin-left: -10px;
    position: absolute;
    top: 100px;
    z-index: 2;

    &::after {
      @extend %pseudo;
      @include width-height(box-size(22px)...);

      border: 3px solid $pikachu-shin;
      border-radius: 0 0 12px 12px / 0 0 20px 20px;
      border-top-color: transparent;

      left: -11px;
      overflow: hidden;
      position: absolute;
      top: -11px;
      z-index: 1;
    }
    // border-bottom: none;

    // Nasal bridge
    &::before {
      @extend %pseudo;
      @include width-height(20px, 10px);

      background-color: $outline-color;
      border-radius: 10px / 5px;
      left: -10px;
      position: absolute;
      top: -16px;
      //box-shadow: 0px 0px 1px 0px black;
    }

    $n: 5deg;
    $step: 33%;

    @keyframes shakeNose {
      0% {
        transform: rotate(0deg);
      }

      @for $i from 1 to 3 {
        #{$i * $step} {
          @if $i % 2 == 0 {
            transform: rotate(-$n);
          } @else {
            transform: rotate($n);
          }
        }
      }

      100% {
        transform: rotate(0);
      }
    }

    &:hover {
      animation: shakeNose infinite 300ms linear;
      transform-origin: center bottom;
    }
  }

  .eye {
    @include width-height(box-size(64px)...);

    background: $pupil-color;
    border: 2px solid $outline-color;
    border-radius: 100%;

    left: 50%;
    margin-left: -32px;
    position: absolute;
    top: 70px;
    transform: translateX(-150px);

    &-right {
      transform: translateX(150px);
    }

    // pupil
    &::before {
      @extend %pseudo;
      @include width-height(box-size(30px)...);
      background-color: $pupil-color2;
      border-radius: 50%;
      left: 5px;
      position: relative;
      top: 5px;
    }
  }

  .cheek {
    z-index: 2;
    $cheek-width-height: 86px;

    %cheek-default {
      @include width-height(box-size($cheek-width-height)...);
      background-color: $japan-red;
      border: 2px solid $outline-color;
      border-radius: 50%;

      left: 50%;
      margin-left: - math.div($cheek-width-height, 2);
      position: absolute;
      top: 180px;
    }

    &-left {
      @extend %cheek-default;
      transform: translateX(-180px);
    }

    &-right {
      @extend %cheek-default;
      transform: translateX(180px);
    }
  }

  .mouth {
    @include width-height(220px, 200px);

    left: 50%;
    margin-left: -110px;
    position: absolute;
    top: 135px;

    // placeholder
    %lips {
      @include width-height(110px, 30px);
      background-color: $pikachu-shin;

      border: 4px solid $outline-color;
      border-top-color: $pikachu-shin;
      border-top-right-radius: 60px 30px;
      border-top-width: 0;
      border-right-width: 0;

      // mustache
      &::after {
        @extend %pseudo;

        @include width-height(100%, .01px);
        border: 2px solid $pikachu-shin;
        left: 1px;
        outline: 1px solid $pikachu-shin;
        position: absolute;
        top: -3px;
      }
    }

    .lip {
      position: relative;
      z-index: 1;

      @mixin border($bd-b-l-rad: 60px 30px, $rotate: rotate(-20deg)) {
        border-bottom-left-radius: $bd-b-l-rad;
        transform: $rotate;
      }

      >.lip-left {
        @extend %lips;
        @include border;
      }

      >.lip-right {
        @extend %lips;
        @include border(60px 30px, translate(110px, -30px) scaleX(-1) rotate(-20deg));
      }
    }

    .jaw {
      @include width-height(100%, 220px);

      // hide lower jaw
      border-radius: 50% 50% 0 0 / 25% 25% 0 0;
      overflow: hidden;
      position: absolute;
      top: 8px;


      .lower-jaw {
        $jaw-width: 180px;
        @include width-height($jaw-width, 580px);


        background-color: $tongue;
        border: 3px solid $outline-color;
        border-radius: 50% / 50%;
        bottom: 0;
        left: 50%;
        margin-left: - math.div($jaw-width, 2);
        overflow: hidden;
        position: absolute;

        // hide tongue

        // tongue
        &::after {
          @extend %pseudo;

          $tongue-width: 200px;
          $tongue-height: 380px;
          @include width-height($tongue-width, $tongue-height);

          background-color: $bloody-mouth;
          border-radius: 100px;
          bottom: - math.div($tongue-height , 2);
          left: 50%;
          margin-left: - math.div($tongue-width, 2);
          position: absolute;
        }
      }
    }
  }
}
